<template>
	<view class="bg">
		<xl-navbar title="状态栏 标签" fixed shadow></xl-navbar>
		<view class="title">基础样式，透明，设备状态栏高度，可做占位</view>
		<xl-status-bar></xl-status-bar>
		
		<view class="title">设置背景色，单色、渐变都可</view>
		<xl-status-bar background="#3dc4fd"></xl-status-bar>
		<view class="split"></view>
		<xl-status-bar background="linear-gradient(180deg, rgb(147, 224, 255), rgb(43, 107, 255))"></xl-status-bar>
		
		<view class="title">状态栏字体颜色：黑(#000000)和白(#ffffff)</view>
		<xl-status-bar :fontColor="fontColor" background="#3dc4fd"></xl-status-bar>
		<view class="flex-around" style="padding: 10px 30px 0;">
			<xl-button text="黑色" width="180rpx" color="#333" @click="changeFontColor"></xl-button>
			<xl-button text="白色" width="180rpx" @click="changeFontColor"></xl-button>
		</view>
		
		<view class="title">可做头部内容盒子，背景用图片</view>
		<xl-status-bar height="400rpx" background="/static/imgs/bg/index.png">
			<view class="text">
				不再需要考虑不同设备状态栏高度，层级可以用zIndex属性。
			</view>
		</xl-status-bar>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const fontColor = ref("#000000")
	
	function changeFontColor(){
		if(fontColor.value == "#000000") fontColor.value = "#ffffff"
		else fontColor.value = "#000000"
	}
	
</script>

<style lang="scss" scoped>

	.split{
		height: 10px;
	}
</style>